<%--
  Created by IntelliJ IDEA.
  User: 熊自国
  Date: 2024/11/25
  Time: 11:13
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <link href="${pageContext.request.contextPath}/static/css/style1.css" rel="stylesheet" type="text/css" />
    <script src="${pageContext.request.contextPath}/static/js/jquery1.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/register.js"></script>
    <style>
      .jq22-register-box{

          top:150px
      }
      .jq22-register-popup{
          background-image: url("${pageContext.request.contextPath}/static/images/jiaju.jpeg");
          background-size: cover; /* 可选：让背景图片覆盖整个盒子，保持比例 */
          background-position: center; /* 可选：让背景图片在盒子中居中 */
          background-repeat: no-repeat; /* 可选：防止背景图片重复 */
          border: 1px solid #000; /* 可选：为了视觉效果，添加一个边框 */
      }
      .input-button-container {
          display: flex; /* 使用flex布局 */
          align-items: center; /* 垂直居中 */
      }

      .input-button-container input,
      .input-button-container button {
          margin-left: 20px; /* 可选：为按钮和输入框之间添加一些间距 */
      }

      /* 可选：为第一个元素（输入框）移除左边的间距 */
      .input-button-container input:first-child {
          margin-left: 0;
      }

      /* 可选：为按钮添加一些样式 */
      .input-button-container button {
          padding: 5px 30px; /* 内边距 */
          background-color: #007BFF; /* 背景颜色 */
          color: white; /* 文本颜色 */
          border: none; /* 移除边框 */
          cursor: pointer; /* 鼠标悬停时显示为手形 */
      }

      /* 可选：为按钮添加悬停效果 */
      .input-button-container button:hover {
          background-color: #0056b3; /* 悬停时的背景颜色 */
      }
    </style>
</head>
<body>

<div class="jq22-register-popup" >
    <div class="jq22-register-box">
        <div class="jq22-register-link">
            <a href="javascript:go('${pageContext.request.contextPath}/jsp/login.jsp')" class="fl">返回首页</a>
            <a href="javascript:go('${pageContext.request.contextPath}/jsp/login.jsp')" class="fr">已有账号？去登录</a>
        </div>
        <div class="jq22-register-logo" style="text-align: center">
            注册用户
        </div>
        <div class="jq22-register-form" id="verifyCheck" >
            <form action="${pageContext.request.contextPath}/user/register.do" method="post">
                <div class="jq22-register-form-item">
                <div class="input-button-container">
                    <input type="text" name="userPhone" placeholder="手机号码" class="txt01 f-r3 required" keycodes="tel" tabindex="1" data-valid="isNonEmpty||isPhone" data-error="<i class='icon-tips'></i>请输入手机号||<i class='icon-tips'></i>手机号码格式不正确" maxlength="11" id="phone">
                    <button type="button" id="yzm">获取验证码</button>
<%--                    <label class="focus valid"><div class="msg" style="display:none"><i class='icon-tips'></i>您还未输入手机号</div></label>--%>
<%--                    <span class="jq22-get-code btn btn-gray f-r3 f-ml5 f-size13" id="time_box" disabled style="display:none;"></span>--%>
                </div>

                </div>
                <div class="jq22-register-form-item">
                    <input type="text" placeholder="验证码" name="code" maxlength="6" id="verifyNo" class="txt02 f-r3 f-fl required" tabindex="2" data-valid="isNonEmpty||isInt" data-error="<i class='icon-tips'></i>请填写正确的手机验证码||<i class='icon-tips'></i>请填写6位手机动态码">
                    <label class="focus valid"></label>
                </div>
                <div class="jq22-register-form-item">
                    <input type="text" name="userUsername" maxlength="20"  placeholder="账户名" class="txt03 f-r3 required" tabindex="3" data-valid="isNonEmpty||between:3-20||isUname" data-error="<i class='icon-tips'></i>您还没有输入账户名||<i class='icon-tips'></i>用户名长度3-20位||<i class='icon-tips'></i>只能输入字母、数字、且以中文或字母开头" id="adminNo">
                    <label class="focus valid"></label>
                </div>


                <div class="jq22-register-form-item">
                    <input type="password" name="userPassword" placeholder="设置密码" id="password" maxlength="20" class="txt04 f-r3 required" tabindex="4" style="ime-mode:disabled;" onpaste="return  false" autocomplete="off" data-valid="isNonEmpty||between:6-20||level:2" data-error="<i class='icon-tips'></i>密码太短，最少6位||<i class='icon-tips'></i>密码长度6-20位||<i class='icon-tips'></i>密码太简单，有被盗风险，建议字母+数字的组合">
                    <label class="focus valid"></label>
                </div>
                <div class="jq22-register-form-item">
                    <input type="password" name="password" placeholder="确认密码" maxlength="20" class="txt05 f-r3 required" tabindex="5" style="ime-mode:disabled;" onpaste="return  false" autocomplete="off" data-valid="isNonEmpty||between:6-16||isRepeat:password" data-error="<i class='icon-tips'></i>密码太短，最少6位||<i class='icon-tips'></i>密码长度6-16位||<i class='icon-tips'></i>两次密码输入不一致" id="rePassword">
                    <label class="focus valid"></label>
                </div>

                <div class="jq22-register-form-item">
                    <div class="protocol">注册即同意<a  href="#">《用户使用协议》</a>&amp;<a href="#">《隐私权条款》</a></div>
                    <input id="jq22-btn-reg" class="jq22-btn-reg" placeholder=""  type="submit" readonly="readonly" value="注册" >
                </div>
            </form>
        </div>
        <div class="jq22-register-bottom">
            <a>©bootstrapmb.com</a>
            <a href="#">联系客服</a>
            <a href="#">帮助中心</a>
            <div class="clear"></div>
        </div>
    </div>
</div>

</body>

<script type="text/javascript">
    $("#yzm").click(function () {
        var phone= $("#phone").val()
        $.get("${pageContext.request.contextPath}/user/code.do", {userPhone: phone}, function (data) {
            if(data==="ok"){
                $("#yzz").text("已发送请查看手机")
            }
        })
    })

    function go(url) {

      window.location.href=url
    }
    $(function() {

        $("#jq22-btn-reg").click(function() {
            // if (!verifyCheck._click()) return;
            alert('恭喜你！注册成功')

        });
    });
    const phoneRegex = /^1[3-9]\d{9}$/;
   var btn=document.querySelector('button');
   var time =60;
   btn.addEventListener('click',function (){

       // 使用正则表达式进行校验

       var phone =$("#phone").val();

       if(phone==null||phone.trim()==''){
            alert("请输入手机号")
       }else {
           if(phoneRegex.test(phone)) {
               btn.disabled=true;
               var timer= setInterval(function () {
                   if(time==0){
                       clearInterval(timer);
                       btn.disabled=false;
                       btn.innerHTML='获取验证码';
                       time=60;
                   }else {
                       btn.innerHTML='还剩下'+time+'秒';
                       time--
                   }
               },1000 );
           }else {
               alert("输入的手机号格式错误")
           }

       }

   })

</script>



</html>
